import { AcGameObject } from "./AcGameObject";
import { Snake } from "./Snake";
import { Wall } from "./Wall";
export class GameMap extends AcGameObject { 
  constructor(ctx, parent,store) { //ctx是画布,parent是ctx的父元素用来动态修改画布的长宽
    super(); // 调用父类的构造函数
    this.store = store;
    this.ctx = ctx;
    this.parent = parent;
    this.L = 0;//L是一个单位的长度，整个地图是13*13个单位
    this.rows=13;
    this.cols=12;
    this.walls = []; // 存储墙的数组
    this.inner_walls_count = 20;//地图中间的墙的数量
    this.snakes=[
      new Snake({id:0,color:"#4876EC",r:this.rows-2,c:1},this),
      new Snake({id:1,color:"#F94848",r:1,c:this.cols-2},this),
    ];
  }
  create_walls() { 
    // console.log(this.store.pk);
    const g=this.store.state.pk.gamemap; //获取后端传过来的地图
    for(let c=0;c<this.cols;c++){
      for(let r=0;r<this.rows;r++){
        if(g[r][c]==true){
          this.walls.push(new Wall(r,c,this)); //把所有标记为 true 的位置，都创建成 Wall 实例，并存入 GameMap 的 walls 数组中
        }
      }
    }
  }
  start(){//只执行一次
    this.create_walls();
    this.add_listening_events();
  }
  update_size(){//每一帧都更新一下边长
    this.L=parseInt(Math.min(this.parent.clientWidth/this.cols,this.parent.clientHeight/this.rows));//每个小正方形的边长
    this.ctx.canvas.width = this.L * this.cols; // 设置canvas的画布宽度
    this.ctx.canvas.height = this.L * this.rows; // 设置canvas的画布高度
  }

  check_ready(){ // 检查两条蛇是否都准备好下一回合(需要都静止并且有指令)
    for(const snake of this.snakes){
      if(snake.status!=="idle") return false;
      if(snake.direction===-1) return false;
    }
    return true;
  }
  next_step(){ //让两条蛇进入下一回合
    for(const snake of this.snakes){
      snake.next_step();
    }
  }

  add_listening_events() { 
    this.ctx.canvas.focus();// 获取焦点
    const [snake0, snake1] = this.snakes;
    this.ctx.canvas.addEventListener("keydown", e => { 
      if(e.key==="w") snake0.set_direction(0);
      else if(e.key==="d") snake0.set_direction(1);
      else if(e.key==="s") snake0.set_direction(2);
      else if(e.key==="a") snake0.set_direction(3);
      else if(e.key==="ArrowUp") snake1.set_direction(0);
      else if(e.key==="ArrowRight") snake1.set_direction(1);
      else if(e.key==="ArrowDown") snake1.set_direction(2);
      else if(e.key==="ArrowLeft") snake1.set_direction(3);
    });
  }
  check_valid(cell){//检测目标位置是否合法：没有撞到两条蛇的身体和墙
    for(const wall of this.walls){
      if(wall.r===cell.r && wall.c===cell.c) return false;//撞到了墙
    }
    for(const snake of this.snakes){ 
      let k=snake.cells.length;//蛇的长度
      if(!snake.check_tail_increasing()){ //蛇尾会往前移一格，蛇的长度不变
        k--;//蛇尾就不考虑进去
      }
      for(let i=0;i<k;i++){//枚举每条蛇的每一个身体
        if(snake.cells[i].r===cell.r && snake.cells[i].c===cell.c) return false;//蛇撞到身体
      }
    }
    return true;
  }
  update() { // 每一帧执行一次
    this.update_size();
    if(this.check_ready()){ 
      this.next_step();
    }
    this.render();
  }
  render() { // 渲染地图（将地图绘制到画布上）
    const color_even="#AAD751"; // 偶数格子的颜色
    const color_odd="#A2D149"; // 奇数格子的颜色
    for (let i = 0; i < this.rows; i++) {
      for (let j = 0; j < this.cols; j++) {
        if ((i + j) % 2 == 0) {
          this.ctx.fillStyle = color_even; // 填充偶数格子为绿色
        } else {
          this.ctx.fillStyle = color_odd; // 填充奇数格子为浅绿色
        }
        this.ctx.fillRect(j * this.L, i * this.L, this.L, this.L); // 绘制每个小正方形
      } 
    }
  }
}

